<template>
  <div>
    <Oprate></Oprate>
    <div class="main-container">
      <div>
        <table id="example" class="display" style="width:100%">
          <thead>
          <tr>
            <th align="center"><input type="checkbox" class="checkall"/></th>
            <th v-for="key in gridColumns">
              {{key}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td><input type="checkbox"  class="checkchild"  value="" /></td>
            <td><a href="http://newengage.huimeimt.cn/doc/糖尿病与胰腺癌密切相关.docx">糖尿病与胰腺癌密切相关</a></td>
            <td>糖尿病、胰腺癌</td>
            <td>docx</td>
            <td>2018/07/20</td>
            <td>2019/01/20</td>
          </tr>
          <tr>
            <td><input type="checkbox"  class="checkchild"  value="" /></td>
            <td><a href="http://newengage.huimeimt.cn/doc/火腿、培根、香肠致癌性堪比砒霜？.pdf">火腿、培根、香肠致癌性堪比砒霜？</a></td>
            <td>癌症</td>
            <td>pdf</td>
            <td>2018/08/12</td>
            <td>2019/01/20</td>
          </tr>
          <tr>
            <td><input type="checkbox"  class="checkchild"  value="" /></td>
            <td><a href="http://newengage.huimeimt.cn/doc/邬麟：肺癌靶向治疗新进展.docx">邬麟：肺癌靶向治疗新进展</a></td>
            <td>肺癌</td>
            <td>docx</td>
            <td>2018/08/16</td>
            <td>2019/01/20</td>
          </tr>
          <tr>
            <td><input type="checkbox"  class="checkchild"  value="" /></td>
            <td><router-link to="/company/content/1">国内临床医学实力最强的十所高校</router-link></td>
            <td>新闻</td>
            <td>文档</td>
            <td>2018/10/21</td>
            <td>2019/01/20</td>
          </tr>
          <tr>
            <td><input type="checkbox"  class="checkchild"  value="" /></td>
            <td><router-link to="/company/content/2">是在预防疾病？还是在危害生命？</router-link></td>
            <td>新闻</td>
            <td>文档</td>
            <td>2018/10/22</td>
            <td>2019/01/20</td>
          </tr>
          </tbody>
          <tfoot>
          <tr>
            <th style="visibility:hidden"></th>
            <th class="tfoot">名称</th>
            <th class="tfoot">名称</th>
            <th class="tfoot">时间</th>
            <th class="tfoot">区域</th>
            <th class="tfoot">人数</th>
          </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <Modal
      v-model="moduleIsShow"
      :loading="uploading"
      title="上传文件"
      :closable="false"
      :mask-closable="false"
      @on-cancel="cancelUpdate"
      @on-ok=""
    >
    <Form :model="formData" :label-width="60">
      <FormItem label="治疗领域">
        <Input v-model="formData.scope" placeholder="请输入失效领域"></Input>
      </FormItem>
      <FormItem label="失效时间">
        <DatePicker 
          type="date" 
          placeholder="请选择失效时间" 
          style="width: 100%;" 
          v-model="formData.loseTime" />
      </FormItem>
      <FormItem label="内容">
        <Input v-model="formData.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入内容"></Input>
      </FormItem>
      <FormItem label="选择文件">
        <Upload
          tip="ddddd"
          action=""
          style="padding-left: 20px;"
          :before-upload="handleUpload"
          type="drag"
        >
          <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或拖拽pdf，word，ppt等文件到这里上传</p>
          </div>
        </Upload>
        <ul v-if="formData.file" style="padding-left: 20px;" class="ivu-upload-list">
          <li class="ivu-upload-list-file ivu-upload-list-file-finish">
            <span>
              <i class="ivu-icon ivu-icon-ios-document-outline"></i> 
              {{formData.file.name}}
            </span> 
            <i @click="rmFile" class="ivu-icon ivu-icon-ios-close ivu-upload-list-remove"></i>
          </li>
        </ul>
      </FormItem>
    </Form>
    </Modal>
  </div>
</template>

<script>
  import bus from '@/components/bus'
  import Oprate from '@/components/Oprate/Oprate7'


//this.$Message.success('Success')
  export default {
    created () {
      var self = this
      bus.$on('addFile', function () {
        self.moduleIsShow = true
      })
    },
    components: {
      Oprate
    },
    data() {
      return {
        moduleIsShow: false,
        uploading: false,
        formData: {
          scope: '',
          file: null,
          loseTime: '',
          content: ''
        },
        gridColumns: ['名称', '治疗领域','格式', '上传时间','失效时间'],
      }
    },
    mounted() {
      this.table1();
    },
    methods: {
      rmFile () {
        this.formData.file = null
      },
      handleUpload (file) {
        this.formData.file = file;
        return false;
      },
      cancelUpdate () {
        this.formData = {}
      },
      table1() {
        $(document).ready(function() {
          // 设置-添加一个文本输入到每个页脚单元格
          $('#example tfoot th').each( function () {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="搜索" />' );
          } );
          /*全选*/
          $(".checkall").click(function () {
            var check = $(this).prop("checked");
            $(".checkchild").prop("checked", check);
          });
          //不显示任何错误信息
          $.fn.dataTable.ext.errMode = 'none';
          // 资料表
          var table = $('#example').DataTable({
            language: {
              "sSearch": "搜索:",
              "oPaginate": {
                "sPrevious": "上一页",
                "sNext": "下一页",
              }
            },
/*            /!*表数据*!/
            "ajax": "',
            "columns": [
              {
                "sClass": "text-center",
                "data": "ID",
                "render": function (data, type, full, meta) {
                  return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                },
                "bSortable": false
              },
              {"data": "State"},
              {
                "data": "name",
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                  $(nTd).html('<a href="">' + oData.name + "</a>");
                },
              },
              {"data": "date"},
              {"data": "territory"},
              {"data": "number"},
            ],*/
            /* 表宽度*/
            columnDefs: [
              {
                width: "1px",
/*                orderable: false,
                className: 'select-checkbox',*/
                targets: 0
              },
              {"width": "120px", "targets": 1},
              {"width": "50px", "targets": 2},
              {"width": "50px", "targets": 3},
              {"width": "20px", "targets": 4},
              {"width": "20px", "targets": 5},
            ],
            dom: "Bfrtip",
            scrollY: true,
            buttons: ['colvis'],
            select: {
              style: 'os',
              selector: 'td:first-child'
            },
            // order: [[1, 'asc']]
          });
          // 应用搜索
          table.columns().every( function () {
            var that = this;
            $( 'input', this.footer() ).on( 'keyup change', function () {
              if ( that.search() !== this.value ) {
                that
                  .search( this.value )
                  .draw();
              }
            } );
          } );
          $('.dt-buttons>button>span').html("");
        } );
      },
    },
  }
</script>

<style scoped>
  @import '../../../assets/index.css';
  .main-container {
    margin-right: 50px;
    padding: 10px 15px 80px;
    background-color: rgba(245, 245, 248, 0.1);
    border-radius: 10px;
    -webkit-box-shadow: 10px 5px 30px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 10px 5px 30px 10px rgba(0, 0, 0, 0.2);
    background-image: url("../../../assets/blur-bg-blurred.jpg");
    font-size: 14px;
  }
</style>
<style>
  table {
    margin: 0 auto;
    width: 100%;
    clear: both;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
  }
  .dt-button-collection > button:first-child {
    display: none !important;
  }
  a {
    color: #fff !important;
    text-decoration: none !important;
  }
  /*背景颜色*/
  thead {
    color: #fff;
  }
  tbody {
    background-color: rgba(0, 0, 0, .15);
    color: #fff;
  }
  tbody > tr {
    background-color: rgba(0, 0, 0, .15) !important;

  }
  tbody > tr > td {
    background-color: rgba(0, 0, 0, .15) !important;
  }
  /*显示1到几条*/
  #example_info {
    display: none;
    z-index: 99;
  }
  /*显示条数*/
  #example_length {
    display: none;
    z-index: 99;
  }
  #example_paginate > a {
    color: #fff !important;
  }
  .text-center {
    text-align: center;
  }
  #example_paginate {
    padding-top: 20px;
  }
  #example_filter {
    color: #fff;
  }
  .dataTables_scrollBody{
    top: 45px!important;
    z-index: 99;
  }
  .dataTables_scrollFoot{
    position: absolute;
    top: 81px;
    z-index: 99;
  }
  /*搜索框样式*/
  .tfoot{
    border-top: none !important;
  }
  .tfoot > input {
    width: 100%;
    padding: 3px;
    margin-left: -8px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
  }
  #example_filter > label > input {
    padding: 3px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
  }
  #example_paginate{
    position: relative;
    top: 55px;
    z-index: 99;
  }
</style>
